// store/user/index.ts
import {
  VuexModule,
  Module,
  Mutation,
  Action,
  getModule
} from 'vuex-module-decorators'
import store from '@/store'
import { SettingState } from './types'

const state: SettingState = {
  miniVariant: false,
  color: 'default',
  search: '',
  colors: ['default', 'lime', 'primary', 'blue', 'green', 'teal', 'orange']
}

@Module({ dynamic: true, store, name: 'settings' })
class Settings extends VuexModule implements SettingState {
  miniVariant = false
  color = 'default'
  search = ''
  colors = ['default', 'lime', 'primary', 'blue', 'green', 'teal', 'orange']

  @Mutation
  private CHANGE_SETTING(payload: { key: string, value: any }) {
    const { key, value } = payload
    if (Object.prototype.hasOwnProperty.call(this, key)) {
      ;(this as any)[key] = value
    }
    console.log(this.color)
  }

  @Mutation
  private INIT_SETTING(Setting: SettingState) {
    Object.assign(this, Setting)
  }

  @Action
  public ChangeSetting(payload: { key: string, value: any }) {
    this.CHANGE_SETTING(payload)
  }

  @Action
  initSetting(): void {
    //  axios({
    //         url: 'https://....'
    //     }).then((response) => {
    //         const payload: User = response && response.data;
    //         commit('profileLoaded', payload);
    //     }, (error) => {
    //         console.log(error);
    //         commit('profileError');
    //     });
    const Setting: SettingState = state
    this.INIT_SETTING(Setting)
  }
}

export const SettingsModule = getModule(Settings)
